<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100%;
				border:1px solid blue;
				overflow:auto;
				padding:20px;
				display: flex;
				
			}
			.inner_body{
				height:30px;
				width: 30px;
				margin:0 auto;
				background:blue;
				color:#fff;
				text-align:center;
				font-size:30px;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
			<div class="inner_body">
				
			</div>
		</div>
		
		<button type="button" onClick="addWidth()">加宽</button>
	</body>
</html>
<script type="text/javascript">
	let index = 0;
	function addWidth(){
		let box = document.getElementById("box");
		let item = document.createElement("div");
		item.innerHTML=index;
		
		item.setAttribute("class","inner_body");
		box.appendChild(item);
		index++;
	}
</script>